<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>精美表单</title>
    <style>
        /* 全局样式重置与基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
        }

        /* 表单容器样式 */
        .form-container {
            background: white;
            padding: 2.5rem;
            border-radius: 16px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
            transform: translateY(0);
            opacity: 1;
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        /* 表单标题 */
        .form-title {
            text-align: center;
            margin-bottom: 1.5rem;
            color: #444;
            font-size: 1.8rem;
            font-weight: 600;
            position: relative;
        }

        .form-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background: #667eea;
            margin: 10px auto;
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .form-title:hover::after {
            width: 100px;
        }

        /* 表单项样式 */
        .form-group {
            margin-bottom: 1.2rem;
            position: relative;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            color: #555;
            font-size: 0.95rem;
            font-weight: 500;
            transition: color 0.3s;
        }

        .form-input,
        .form-select,
        .form-textarea {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
            outline: none;
        }

        /* 输入框获得焦点时的样式 */
        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
            transform: translateY(-2px);
        }

        /* 输入框验证成功样式 */
        .form-input.valid {
            border-color: #4CAF50;
            background-color: #f8fff8;
        }

        /* 输入框验证失败样式 */
        .form-input.invalid {
            border-color: #f44336;
            background-color: #fff8f8;
        }

        /* 错误提示信息 */
        .error-message {
            color: #f44336;
            font-size: 0.85rem;
            margin-top: 0.5rem;
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .error-message.show {
            display: block;
        }

        /* 动画定义 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        .shake {
            animation: shake 0.5s ease-in-out;
        }

        /* 复选框和单选按钮样式 */
        .checkbox-group,
        .radio-group {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .checkbox-item,
        .radio-item {
            display: flex;
            align-items: center;
            cursor: pointer;
            user-select: none;
            font-size: 0.95rem;
            color: #555;
            transition: color 0.2s;
        }

        .checkbox-item:hover,
        .radio-item:hover {
            color: #667eea;
        }

        .checkbox-input,
        .radio-input {
            margin-right: 0.5rem;
            accent-color: #667eea;
        }

        /* 提交按钮样式 */
        .submit-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(to right, #667eea, #764ba2);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1rem;
            position: relative;
            overflow: hidden;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        .submit-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }

        .submit-btn:active::after {
            animation: ripple 0.8s linear;
        }

        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(300, 300);
                opacity: 0;
            }
        }

        /* 成功提交提示 */
        .success-message {
            text-align: center;
            color: #4CAF50;
            margin-top: 1rem;
            font-weight: 500;
            opacity: 0;
            height: 20px;
            transition: opacity 0.3s;
        }

        .success-message.show {
            opacity: 1;
        }

        /* 响应式设计 */
        @media (max-width: 600px) {
            .form-container {
                margin: 1rem;
                padding: 1.5rem;
            }

            .form-title {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
<!-- 表单容器 -->
<div class="form-container" id="formContainer">
    <!-- 表单标题 -->
    <h2 class="form-title">用户注册表单</h2>

    <!-- 注册表单 -->
    <form id="registrationForm" novalidate>
        <!-- 姓名输入 -->
        <div class="form-group">
            <label for="name" class="form-label">姓名 *</label>
            <input
                    type="text"
                    id="name"
                    class="form-input"
                    placeholder="请输入您的姓名"
            />
            <p class="error-message" id="nameError">姓名不能为空，且至少2个字符</p>
        </div>

        <!-- 邮箱输入 -->
        <div class="form-group">
            <label for="email" class="form-label">邮箱 *</label>
            <input
                    type="email"
                    id="email"
                    class="form-input"
                    placeholder="请输入您的邮箱"
            />
            <p class="error-message" id="emailError">请输入有效的邮箱地址</p>
        </div>

        <!-- 手机号码 -->
        <div class="form-group">
            <label for="phone" class="form-label">手机号码 *</label>
            <input
                    type="tel"
                    id="phone"
                    class="form-input"
                    placeholder="请输入您的手机号码"
            />
            <p class="error-message" id="phoneError">请输入有效的手机号码</p>
        </div>

        <!-- 年龄 -->
        <div class="form-group">
            <label for="age" class="form-label">年龄</label>
            <input
                    type="number"
                    id="age"
                    class="form-input"
                    min="1"
                    max="120"
                    placeholder="请输入您的年龄"
            />
            <p class="error-message" id="ageError">年龄必须在1-120之间</p>
        </div>

        <!-- 性别选择 -->
        <div class="form-group">
            <label class="form-label">性别</label>
            <div class="radio-group">
                <label class="radio-item">
                    <input type="radio" name="gender" value="male" class="radio-input">
                    男
                </label>
                <label class="radio-item">
                    <input type="radio" name="gender" value="female" class="radio-input">
                    女
                </label>
                <label class="radio-item">
                    <input type="radio" name="gender" value="other" class="radio-input">
                    其他
                </label>
            </div>
        </div>

        <!-- 兴趣爱好 -->
        <div class="form-group">
            <label class="form-label">兴趣爱好</label>
            <div class="checkbox-group">
                <label class="checkbox-item">
                    <input type="checkbox" name="hobby" value="reading" class="checkbox-input">
                    阅读
                </label>
                <label class="checkbox-item">
                    <input type="checkbox" name="hobby" value="sports" class="checkbox-input">
                    运动
                </label>
                <label class="checkbox-item">
                    <input type="checkbox" name="hobby" value="music" class="checkbox-input">
                    音乐
                </label>
                <label class="checkbox-item">
                    <input type="checkbox" name="hobby" value="travel" class="checkbox-input">
                    旅行
                </label>
            </div>
        </div>

        <!-- 城市选择 -->
        <div class="form-group">
            <label for="city" class="form-label">所在城市</label>
            <select id="city" class="form-select">
                <option value="">请选择城市</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
                <option value="hangzhou">杭州</option>
            </select>
        </div>

        <!-- 留言 -->
        <div class="form-group">
            <label for="message" class="form-label">留言</label>
            <textarea
                    id="message"
                    class="form-textarea"
                    rows="3"
                    placeholder="请输入您的留言..."
            ></textarea>
        </div>

        <!-- 提交按钮 -->
        <button type="submit" class="submit-btn">立即注册</button>

        <!-- 成功提示 -->
        <p class="success-message" id="successMessage">注册成功！感谢您的提交。</p>
    </form>
</div>

<script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 获取表单和所有输入元素
        const form = document.getElementById('registrationForm');
        const nameInput = document.getElementById('name');
        const emailInput = document.getElementById('email');
        const phoneInput = document.getElementById('phone');
        const ageInput = document.getElementById('age');
        const successMessage = document.getElementById('successMessage');

        // 获取所有错误信息元素
        const nameError = document.getElementById('nameError');
        const emailError = document.getElementById('emailError');
        const phoneError = document.getElementById('phoneError');
        const ageError = document.getElementById('ageError');

        // 表单容器，用于动画
        const formContainer = document.getElementById('formContainer');

        // 页面加载时添加进入动画
        setTimeout(() => {
            formContainer.style.transform = 'translateY(-20px)';
            formContainer.style.opacity = '0.8';
        }, 100);

        // 验证姓名：不能为空，至少2个字符
        function validateName() {
            const value = nameInput.value.trim();
            if (value === '' || value.length < 2) {
                nameInput.classList.remove('valid');
                nameInput.classList.add('invalid');
                nameError.classList.add('show');
                return false;
            } else {
                nameInput.classList.remove('invalid');
                nameInput.classList.add('valid');
                nameError.classList.remove('show');
                return true;
            }
        }

        // 验证邮箱：基本邮箱格式
        function validateEmail() {
            const value = emailInput.value.trim();
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(value)) {
                emailInput.classList.remove('valid');
                emailInput.classList.add('invalid');
                emailError.classList.add('show');
                return false;
            } else {
                emailInput.classList.remove('invalid');
                emailInput.classList.add('valid');
                emailError.classList.remove('show');
                return true;
            }
        }

        // 验证手机号：11位数字，以1开头
        function validatePhone() {
            const value = phoneInput.value.trim();
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(value)) {
                phoneInput.classList.remove('valid');
                phoneInput.classList.add('invalid');
                phoneError.classList.add('show');
                return false;
            } else {
                phoneInput.classList.remove('invalid');
                phoneInput.classList.add('valid');
                phoneError.classList.remove('show');
                return true;
            }
        }

        // 验证年龄：1-120之间
        function validateAge() {
            const value = ageInput.value;
            if (value === '') {
                ageInput.classList.remove('valid', 'invalid');
                ageError.classList.remove('show');
                return true; // 年龄非必填
            }
            const age = parseInt(value);
            if (isNaN(age) || age < 1 || age > 120) {
                ageInput.classList.remove('valid');
                ageInput.classList.add('invalid');
                ageError.classList.add('show');
                return false;
            } else {
                ageInput.classList.remove('invalid');
                ageInput.classList.add('valid');
                ageError.classList.remove('show');
                return true;
            }
        }

        // 实时验证 - 输入时触发
        nameInput.addEventListener('blur', validateName);
        nameInput.addEventListener('input', () => {
            nameInput.classList.remove('valid', 'invalid');
            nameError.classList.remove('show');
        });

        emailInput.addEventListener('blur', validateEmail);
        emailInput.addEventListener('input', () => {
            emailInput.classList.remove('valid', 'invalid');
            emailError.classList.remove('show');
        });

        phoneInput.addEventListener('blur', validatePhone);
        phoneInput.addEventListener('input', () => {
            phoneInput.classList.remove('valid', 'invalid');
            phoneError.classList.remove('show');
        });

        ageInput.addEventListener('blur', validateAge);
        ageInput.addEventListener('input', () => {
            ageInput.classList.remove('valid', 'invalid');
            ageError.classList.remove('show');
        });

        // 表单提交事件
        form.addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止默认提交行为

            // 执行所有验证
            const isNameValid = validateName();
            const isEmailValid = validateEmail();
            const isPhoneValid = validatePhone();
            const isAgeValid = validateAge();

            // 检查是否有无效字段
            if (!isNameValid || !isEmailValid || !isPhoneValid || !isAgeValid) {
                // 添加抖动动画到表单容器
                formContainer.classList.add('shake');
                setTimeout(() => {
                    formContainer.classList.remove('shake');
                }, 500);
                return;
            }

            // 收集表单数据
            const formData = {
                name: nameInput.value.trim(),
                email: emailInput.value.trim(),
                phone: phoneInput.value.trim(),
                age: ageInput.value,
                gender: document.querySelector('input[name="gender"]:checked')?.value || '未选择',
                hobbies: Array.from(document.querySelectorAll('input[name="hobby"]:checked')).map(cb => cb.value),
                city: document.getElementById('city').value,
                message: document.getElementById('message').value.trim()
            };

            // 模拟提交过程（实际项目中这里会发送到服务器）
            const submitBtn = document.querySelector('.submit-btn');
            const originalText = submitBtn.textContent;
            submitBtn.textContent = '提交中...';
            submitBtn.disabled = true;

            // 模拟网络请求延迟
            setTimeout(() => {
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;

                // 显示成功信息
                successMessage.classList.add('show');

                // 清空表单（除了选择项）
                form.reset();
                document.querySelectorAll('.form-input').forEach(input => {
                    input.classList.remove('valid', 'invalid');
                });
                document.querySelectorAll('.error-message').forEach(el => {
                    el.classList.remove('show');
                });

                // 3秒后隐藏成功信息
                setTimeout(() => {
                    successMessage.classList.remove('show');
                }, 3000);

            }, 1500);
        });

        // 为所有输入框添加聚焦效果
        document.querySelectorAll('.form-input, .form-select, .form-textarea').forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('focused');
            });

            input.addEventListener('blur', function() {
                this.parentElement.classList.remove('focused');
            });
        });

        // 选择框变化时的反馈
        document.getElementById('city').addEventListener('change', function() {
            if (this.value) {
                this.style.borderColor = '#667eea';
            } else {
                this.style.borderColor = '#ddd';
            }
        });
    });
</script>
</body>
</html>